import React, { useEffect, useState } from 'react'
import './TopSinger.css'
import right_arrow from '../../../assets/images/right_arrow.png'
import play from '../../../assets/images/play.png'
import Scroll from '../../../baseUI/scroll'



const TopSinger = (props) => {
    
    const {singerMessage = []}= props
    // console.log(singerMessage,'top');
    return (
    <div className="">
        <div className="title">
            <div className="often_listen">
                常听歌手
            </div>
            <div className="follow_singger">
                <div className="word">
                关注歌手
                </div>
                <div className="arrow">
                    <img src={right_arrow} alt="" />

                </div>
                
            </div>
        </div>
        <div className="scroll_y">
        
        
            {
            singerMessage.map((item,index)=>{
            return(
            <div className="singer_box" key={index}>
                <div className="portrait">
                    <img src={item.picUrl} alt="" className='pic_singer'/>
                </div>
                <div className="singerName">
                    {item.name}
                </div>
                <div className="play_icon">
                    <img src={play} alt="" className='play'/>
                </div>
            </div>
            )
            })
            
            }
            
        
        </div>
    </div>
    )
}

export default TopSinger